<template>
  <section class="todoapp">
    <!-- 除了驼峰, 还可以使用-转换链接 -->
    <TodoHeader
     @addFn="addList"
    />
    <TodoMain
    :arr="uFinished"
    @delFn="delList"

    />
    <TodoFooter
    :arr="list"
    @typeList='typeListFn'
    @delListFn='delList1'
    />
  </section>
</template>

<script>
// 引入css
import './assets/css/base.css'
import './assets/css/index.css'
// 导入组件
import TodoHeader from './components/TodoHeader.vue'
import TodoMain from './components/TodoMain.vue'
import TodoFooter from './components/TodoFooter.vue'
export default {
  data(){
    return{
      
       list:JSON.parse(window.localStorage.getItem('showList')) || [
        { id: 100, name: "吃饭", isDone: true },
        { id: 201, name: "睡觉", isDone: false },
        { id: 103, name: "打豆豆", isDone: true },
      ],
      type:'all'
    }
  },
   components:{
    TodoHeader,
    TodoMain,
    TodoFooter
  },
  methods:{
    addList(info){
      const obj={id:Date.now(), name:info,isDone:false}
      this.list.push(obj)
    },
    delList(i){
      if(window.confirm('确定删除吗?')){
        this.list.splice(i,1)
      }
    },
    typeListFn(t){
      this.type=t
    },
    delList1(){
      return this.list=this.list.filter(item=>{return item.isDone===false})
    }
  },
  computed:{
    uFinished(){
      if(this.type==='no'){
        return this.list.filter(item=>{return item.isDone===false})
    }else if(this.type==='yes'){
      return this.list.filter(item=>{return item.isDone===true})
    }else{
      return this.list
    }
    }
  },
  watch:{
    list:{
      deep:true,
      handler(newval){
         window.localStorage.setItem('showList',JSON.stringify(newval))
      }
    }
  }

}
</script>

<style>

</style>